<template>
  <div class="user-item">
      <h2>用户图片</h2>
      <p>点击删除</p>
      <template v-for="item in user.img">
        <el-image
          :key="item"
          style="width: 100px; height: 100px"
          :src="url + item"
          fit="cover"
          @click="clickDel"
        />
      </template>
   
  </div>
</template>

<script>
import config from "@/utils/config";
export default {
  name: "user-info",
  data() {
    return {
      user: {
        img: [],
      },
      url: config["resource_server"],
      _id: "",
    };
  },
  async created() {
    this._id = this.$route.params._id;
    await this.getUser();
  },
  methods: {
    getUser() {
      this.$store.dispatch("users/search", { _id: this._id }).then((res) => {
        Object.assign(this.user, res[0]);
      });
    },
    clickDel(e) {
      let url = e.target.src.replace(config["resource_server"], "");
      console.log("url=====>", url);
      this.$store
        .dispatch("users/delImg", { _id: this._id, url })
        .then((res) => {
          if ((res.n = 1)) {
            this.$message({
              message: "图片删除成功",
              type: "success",
            });
            this.getUser();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.user-item {
  padding: 20px 0 30px 0;
}
</style>